<template>
  <div>
    <!-- 套餐选择 -->
    <h3 class="text-lg font-medium pl-4 mb-2 mt-2">{{ $t("products.packages") }}</h3>
    <div class="bg-white rounded-lg p-4 mb-3 mx-4 w-[calc(100%-2rem)]">
      <div class="grid grid-cols-4 gap-3">
        <div
          v-for="(item, index) in firstLevelOptions"
          :key="index"
          :class="[
            'p-1 rounded-xl flex items-center justify-center cursor-pointer transition-all duration-200 text-sm font-medium',
            currentFirstLevelIndex === index
              ? 'bg-orange-500 text-white border-2 border-orange-500'
              : 'bg-gray-100 text-gray-600 border-2 border-gray-200 hover:border-gray-300',
          ]"
          @click="currentFirstLevelIndex = index">
          {{ item.name }}
        </div>
      </div>
    </div>

    <!-- 天数选择 -->
    <h3 class="text-lg font-medium pl-4 mb-2">{{ $t("products.days") }}</h3>
    <div class="bg-white rounded-lg p-3 mb-3 mx-4 w-[calc(100%-2rem)]" v-if="secondLevelOptions.length > 0">
      <div class="grid grid-cols-5 gap-3">
        <div
          v-for="(item, index) in secondLevelOptions"
          :key="index"
          :class="[
            'p-1 rounded-xl flex items-center justify-center cursor-pointer transition-all duration-200 text-sm font-medium',
            currentSecondLevelIndex === index
              ? 'bg-orange-500 text-white border-2 border-orange-500'
              : 'bg-gray-100 text-gray-600 border-2 border-gray-200 hover:border-gray-300',
          ]"
          @click="currentSecondLevelIndex = index">
          {{ item.name }}
        </div>
      </div>
    </div>

    <!-- 数量选择 -->
    <h3 class="text-lg font-medium pl-4 mb-2">{{ $t("products.quantity") }}</h3>
    <div class="bg-white rounded-lg p-3 mb-3 mx-4 w-[calc(100%-2rem)]">
      <van-stepper v-model="quantity" min="1" :max="currentStock" class="border-0" />
    </div>

    <!-- 价格显示 -->
    <div class="bg-white rounded-lg p-3 mb-2 mx-4 w-[calc(100%-2rem)]">
      <h3 class="text-lg font-medium mb-2">{{ $t("products.price") }}</h3>
      <div class="text-[#ff7a00] line-through text-sm mb-1">RM {{ formatToYuan(currentMarketPrice) }}</div>
      <div class="text-[#ff7a00] text-2xl font-bold">RM {{ formatToYuan(currentPrice) }}</div>
    </div>
  </div>
</template>

<script>
import { Stepper } from "vant"
import { formatToYuan } from "@/utils/common"
export default {
  name: "ProductOptions",
  components: {
    [Stepper.name]: Stepper,
  },
  props: {
    skus: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      packages: [
        { label: "50GB", value: "50GB" },
        { label: "30GB", value: "30GB" },
        { label: "20GB", value: "20GB" },
        { label: "10GB", value: "10GB" },
        { label: "每日3GB", value: "每日3GB" },
        { label: "每日2GB", value: "每日2GB" },
        { label: "每日1GB", value: "每日1GB" },
        { label: "无限流量", value: "无限流量" },
      ],
      dayOptions: [
        { label: "5天", value: 5 },
        { label: "7天", value: 7 },
        { label: "8天", value: 8 },
        { label: "10天", value: 10 },
        { label: "12天", value: 12 },
        { label: "15天", value: 15 },
        { label: "20天", value: 20 },
        { label: "30天", value: 30 },
        { label: "90天", value: 90 },
      ],
      currentFirstLevelIndex: 0, // 当前选中的一级选项索引
      currentSecondLevelIndex: 0, // 当前选中的二级选项索引
      quantity: 1, // 数量
      formatToYuan
    }
  },
  computed: {
    // 一级选项列表
    firstLevelOptions() {
      // console.log('this.skus :>> ', this.skus);
      return this.skus || []
    },
    // 当前选中一级选项对象
    currentFirstLevel() {
      if (this.currentFirstLevelIndex === null) return null
      const firstLevel = this.firstLevelOptions[this.currentFirstLevelIndex]
      console.log("firstLevel :>> ", firstLevel)
      return firstLevel || null
    },
    // 当前一级下的二级选项列表
    secondLevelOptions() {
      return this.currentFirstLevel && this.currentFirstLevel.dayList ? this.currentFirstLevel.dayList : []
    },
    // 当前选中二级选项对象
    currentSecondLevel() {
      if (this.currentSecondLevelIndex === null) return null
      const secondLevel = this.secondLevelOptions[this.currentSecondLevelIndex]
      console.log("secondLevel :>> ", secondLevel)
      return secondLevel || null
    },
    // 当前选中SKU的价格
    currentPrice() {
      if (this.currentSecondLevel) {
        return this.currentSecondLevel.price
      }
      if (this.currentFirstLevel && (!this.currentFirstLevel.dayList || this.currentFirstLevel.dayList.length === 0)) {
        return this.currentFirstLevel.price
      }
      return 0
    },
    // 当前选中SKU的市场价格
    currentMarketPrice() {
      if (this.currentSecondLevel) {
        return this.currentSecondLevel.marketPrice
      }
      if (this.currentFirstLevel && (!this.currentFirstLevel.dayList || this.currentFirstLevel.dayList.length === 0)) {
        return this.currentFirstLevel.marketPrice
      }
      return 0
    },
    // 当前选中SKU的库存
    currentStock() {
      if (this.currentSecondLevel) {
        return this.currentSecondLevel.stock
      }
      if (this.currentFirstLevel && (!this.currentFirstLevel.dayList || this.currentFirstLevel.dayList.length === 0)) {
        return this.currentFirstLevel.stock
      }
      return 0
    },
  },
  methods: {
    // 获取已选文本
    getSelectedText() {
      let text = ""

      if (this.currentFirstLevel) {
        text += this.currentFirstLevel.name + "  "
      }
      if (this.currentSecondLevel) {
        text += this.currentSecondLevel.name
      }
      return text
    },
    selectPackage(value) {
      this.$emit("package-change", value)
    },
    selectDays(value) {
      this.$emit("days-change", value)
    },
  },
}
</script>

<style scoped></style>
